<template>
  <div class="table">
    <el-table :data="data" border :row-class-name="tableRowClassName">
      <el-table-column prop="no" label="序号" align="center" width="60">
        <template slot-scope="scope">
          <span>{{scope.$index < 9 && page == 1 ? '0' : ''}}{{(page - 1) * 10 + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column :prop="item.prop" :label="item.name" align="center" :key='index' v-for="(item,index) in head"
                       :width="item.width?item.width:''"
                       :fixed='!!item.fixed' :show-overflow-tooltip='!!item.tooltip'>

      </el-table-column>
      <el-table-column prop="operate" label="操作" align="center" width='120' class-name="suibian" v-if="actions">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            :key="index"
            v-for="(act, index) in actions"
            @click.native.prevent="doAction(scope.row, act, scope.$index)">{{actionText(scope.row, act)}}
          </el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  // action: del,edit,status,reset,view
  export default {
    name: "data-table",
    props: ["head", "data", "actions", "page"],
    data() {
      return {
        allActions: {
          sub: '提交',
          del: '删除',
          edit: '编辑',
          reset: '重置密码',
          view: '查看',
          revoke: '撤销',
          status: ['启用', '禁用'],
          confirm:'确认',
          remove: '移除',
          feedback: '反馈',
          receive: '立即接收',
          reject: '暂不接收',
          stop: '中止',
          select: '选择',
          change: '修改'
        }
      }
    },
    created() {

    },
    methods: {
      tableRowClassName({row, rowIndex}) {

        if (row.taskState == '2' || row.taskState == '0' || row.taskState == '1') {
          return 'warning-row';
        } else if (row.taskState == '8') {
          return 'success-row';
        } else if (row.taskState == '10') {
          return 'done-row';
        } else if (row.taskState == '4' || row.taskState == '5' || row.taskState == '6') {
          return 'over-row';
        }
        return '';

      },
      actionText(row, action) {
        if (action === 'status') {
          if (row.status === 0) {
            return '禁用'
          } else {
            return '启用'
          }
        } else if (action === 'del') {
          if (this.$profile.organiza.level === 0) {
            return '删除'
          } else {
            return ''
          }
        } else {
          return this.allActions[action]
        }
      },
      doAction(row, action, index) {
        if (action === "del") {
          this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.$emit("callback", {action, data: row, index});
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除"
              });
            });
        } else {
          this.$emit("callback", {action, data: row, index});
        }
      },
      rowClick(row) {
        this.$emit("callback", {action: 'detail', data: row});
      }
    }
  };
</script>

<style>
  .el-table .warning-row {
    background: #fe6e6e;
  }

  .el-table .success-row {
    background: #e0e0e0;
  }

  .el-table .done-row {
    background: #47ec6a;
  }

  .el-table .over-row {
    background: #b3b3b3;
  }
</style>
